<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- This is the example list source: if you are trying to look at the
        source of an example, YOU ARE IN THE WRONG PLACE. If you want to view
        the source of just one example, you can typically choose
        "This Frame -> View source" when right clicking on the example. If not,
        choose to open the example in a new window (via the context menu
        click on the link), and view source from there. -->
        <title>OpenLayers Examples</title>
        <link rel="alternate" href="example-list.xml" type="application/atom+xml" />
        <link rel="stylesheet" href="style.css" type="text/css">
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                line-height: 1.25em;
            }
            #logo {
                text-shadow: 2px 2px 3px gray;
                color: white;
                vertical-align: middle;
                position: absolute;
                top: 5px;
                left: 5px;
                font-size: 34px;
                font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
            }
            #logo img {
                vertical-align: middle;
            }
            .ex_container{
            }
            .ex_container a {
                text-decoration: none;
                padding: 5px 1em;
                display: block;
            }
            .ex_container a:hover {
                background-color: #eeeeee;
            }
            .ex_title{
                display: inline;
                font-weight: bold;
                color: #333;
            }
            .ex_tags{
                display: inline;
                font-size: smaller;
                font-style: italic;
                color: #333;
            }
            .ex_filename {
                font-weight: normal;
                font-size: 0.8em;
                color: #ccc
            }
            .ex_description{
                color: #222;
                padding: 3px;
            }
            .ex_classes{
                font-size: .7em;
                color: gray;
                display: none;
            }
            #toc {
                width: 100%;
                height: 100%;
            }
            #filter {
                position: fixed;
                text-align: center;
                top: 0px;
                background: #9D9FA1;
                width: 100%;
                padding: 1.3em 0;
            }
            #examples {
                overflow: auto;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #examples ul {
                list-style: none;
                margin: 0;
                padding: 0;
                margin-top: 4em;
            }
            #examples ul li {
                display: inline;
                float: left;
                width: 350px;
                margin: 10px 0 0 10px;
                padding: 0;
                border: 1px solid #ddd;
                border-radius: 3px;
            }
            #examples .mainlink {
                height: 8em;
                overflow: auto;
            }
            #exwin {
                position: absolute;
                top: 0;
                left: 30%;
                width: 70%;
                height: 100%;
                border: none;
                border-left: 1px solid #cccccc;
                margin: 0;
            }
            @media only screen and (max-width: 600px) {
                #examples ul {
                    margin-top: 100px;
                }
                #filter {
                    padding-top: 50px;
                }
                #examples ul li {
                    margin-left: 0;
                    border-radius: 0;
                    border-width: 1px 0;
                    width: 100%;
                }
                #examples .mainlink {
                    height: auto;
                }
                #examples .ex_tags, #examples .ex_filename {
                    display: none;
                }
            }
        </style>
        <script type="text/javascript" src="Jugl.js"></script>
        <script type="text/javascript" src="example-list.js"></script>
        <script type="text/javascript">
            var template, target;

            function listExamples(examples) {
                target.innerHTML = "";
                var node = template.process({
                    context: {examples: examples},
                    clone: true,
                    parent: target
                });
                document.getElementById("count").innerHTML = "(" + examples.length + ")";
            }

            var timerId;
            function inputChange() {
                if(timerId) {
                    window.clearTimeout(timerId);
                }
                var text = this.value;
                timerId = window.setTimeout(function() {
                    filterList(text);
                }, 500);
            }

            function filterList(text) {
                var examples;
                if(text.length < 2) {
                    examples = info.examples;
                } else {
                    var words = text.split(/\W+/);
                    var scores = {};
                    for(var i=0; i<words.length; ++i) {
                        var word = words[i].toLowerCase();
                        var dict = info.index[word];
                        var updateScores = function() {
                            for(exIndex in dict) {
                                var count = dict[exIndex];
                                if(scores[exIndex]) {
                                    if(scores[exIndex][word]) {
                                        scores[exIndex][word] += count;
                                    } else {
                                        scores[exIndex][word] = count;
                                    }
                                } else {
                                    scores[exIndex] = {};
                                    scores[exIndex][word] = count;
                                }
                            }
                        };
                        if(dict) {
                            updateScores();
                        } else {
                            var r;
                            for (idx in info.index) {
                               r = new RegExp(word);
                               if (r.test(idx)) {
                                    dict = info.index[idx];
                                    updateScores();
                               }
                            }
                        }
                    }
                    examples = [];
                    for(var j in scores) {
                        var ex = info.examples[j];
                        ex.score = scores[j];
                        examples.push(ex);
                    }
                    // sort examples by first by number of words matched, then
                    // by word frequency
                    examples.sort(function(a, b) {
                        var cmp;
                        var aWords = 0, bWords = 0;
                        var aScore = 0, bScore = 0;
                        for(var i in a.score) {
                            aScore += a.score[i];
                            aWords += 1;
                        }
                        for(var j in b.score) {
                            bScore += b.score[j];
                            bWords += 1;
                        }
                        if(aWords == bWords) {
                            cmp = bScore - aScore;
                        } else {
                            cmp = bWords - aWords;
                        }
                        return cmp;
                    });
                }
                listExamples(examples);
            }

            function showAll() {
                document.getElementById("keywords").value = "";
                listExamples(info.examples);
            }

            function parseQuery() {
                var params = {};
                var list = window.location.search.substring(1).split("&");
                for(var i=0; i<list.length; ++i) {
                    var pair = list[i].split("=");
                    if(pair.length == 2) {
                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
                    }
                }
                if(params["q"]) {
                    var input = document.getElementById("keywords");
                    input.value = params["q"];
                    inputChange.call(input);
                }
            }
            window.onload = function() {
                //document.getElementById('keywords').focus();
                template = new jugl.Template("template");
                target = document.getElementById("examples");
                listExamples(info.examples);
                document.getElementById("keywords").onkeyup = inputChange;
                parseQuery();
            };
        </script>
    </head>
    <body>
        <div id="toc">
            <div id="filter">
                <div id="logo">
                <img src="http://openlayers.org/two/images/OpenLayers.trac.png"
                 />
                 OpenLayers
             </div>
                <p>
                    <input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
                    <span id="count"></span>
                    <a href="javascript:void showAll();">show all</a>
                </p>
            </div>
            <div id="examples"></div>
        </div>
        <div style="display: none;">
            <ul id="template">
                <li class="ex_container" jugl:repeat="example examples">
                <a jugl:attributes="href example.link" class="mainlink"
                    target="_blank">
                        <h5 class="ex_title">
                            <span jugl:replace="example.title">title</span><br>
                            <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
                        </h5>
                        <div class="ex_description" jugl:content="example.shortdesc">
                            Short Description goes here
                        </div>
                        <p class="ex_classes" jugl:content="example.classes">
                            Related Classes go here
                        </p>
                        <div class="ex_tags" jugl:content="'...tagged with ' + example.tags">

                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>
